<style lang="less" scoped>
.component {
    .container {
        position: relative;
    }
    .title {
        position: relative;
        display: flex;
        padding: 0.1rem 0.15rem;
        padding-top: 0.15rem;
        height: 20px;
        div {
            flex: 1;
            font-size: 0.13rem;
            color: #1b88ee;
        }
        p {
            width: 20px;
            height: 20px;
        }
    }
    .body {
        margin: 0 0.15rem;
        font-size: 0.12rem;
        .box {
            border-radius: 8px;
            padding: 0.15rem 0.15rem 0 0.15rem;
            background-color: #fff;
            margin-bottom: 10px;
        }
        .row {
            display: flex;
            padding-bottom: 0.15rem;
            label {
                color: #999999;
                min-width: 0.7rem;
            }
            span {
                flex: 1;
                text-align: right;
            }
        }
    }
}
</style>
<template>
    <div class="component">
        <div class="container">
            <div class="title">
                <div>结算条款</div>
                <p class="more foldopen"></p>
            </div>
            <div class="body">
                <div class="box">
                    <div class="row">
                        <label>合约经营面积：</label>
                        <span>{{ fdata.area }}</span>
                    </div>
                    <div class="row">
                        <label>合约期限：</label>
                        <span>{{ fdata.contract_start_date }} ~ {{ fdata.contract_end_date }}</span>
                    </div>
                    <div class="group" v-for="(item, idx) in fdata.fee_items" :key="idx">
                        <div class="row">
                            <label>费用类别名称：</label>
                            <span>{{ item.fee_config_name }}</span>
                        </div>
                        <div class="row">
                            <label>日单价：</label>
                            <span>{{ item.daily_unit_price }}</span>
                        </div>
                        <div class="row">
                            <label>月单价：</label>
                            <span>{{ item.monthly_unit_price }}</span>
                        </div>
                        <div class="row">
                            <label>月总租金：</label>
                            <span>{{ item.monthly_gross_rent }}</span>
                        </div>
                        <div class="row">
                            <label>总金额：</label>
                            <span>{{ item.total_amount }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ChildBox from "./foldbox2_1";
export default {
    data() {
        return {
            cdata: {}
        };
    },
    components: {
        ChildBox
    },
    props: {
        fdata: {
            type: Object,
            default: function() {
                return {};
            }
        }
    },
    methods: {},
    mounted() {}
};
</script>
